import * as YvanUI from 'yvan-ui-wotu'
import CustomDict from "../widget/custom.dict";
import * as CustomService from "@server/example/CustomService";

interface Ref {
    tab1: YvanUI.Tabs
    grid1: YvanUI.Grid
    grid2: YvanUI.Grid
}

const React = YvanUI.React
const Observer = YvanUI.Observer
const _ = YvanUI.lodash

export default class SimpleTabs2 extends YvanUI.Scope<void, Ref> {

    onRender() {
        window['biz'] = this
    }

    vjson = {
        title: '极简-Tabs22',
        toolbar: [
            {
                view: 'button',
                text: '按钮',
                onClick: () => {
                    console.log('activeKey', this.refs.tab1.activeKey)
                }
            }
        ],
        items: [
            {
                view: 'card',
                items: [
                    {
                        view: 'tabs',
                        ref: 'tab1',
                        defaultTabIndex: 1,
                        onTabClick: () => {
                            console.log('onTabClick', this, arguments)
                        },
                        onTabScroll: () => {
                            console.log('onTabScroll', this, arguments)
                        },
                        items: [
                            {
                                title: '选项卡1',
                                key: 'thetab1',
                                forceRender: false,
                                content: {
                                    view: 'grid',
                                    title: '表格排序',
                                    ref: 'grid1',
                                    idField: "customerid",
                                    toolbar: [
                                        {
                                            view: 'button',
                                            text: '刷新',
                                            icon: 'fa fa-refresh',
                                            type: 'primary',
                                            onClick: () => {
                                                this.refs.grid1.refresh()
                                            }
                                        },
                                    ],
                                    columns: [
                                        {field: "customerid", hidden: true},
                                        {field: "customer_code", title: "客户编号", width: 80,},
                                        {field: "customer_name", title: "客户名称", width: 120},
                                        {field: "logogram", title: "助记码", width: 80},
                                        {
                                            field: "industry_class",
                                            title: "客户类型",
                                            width: 100,
                                            data: CustomDict.industryclass
                                        },
                                        {
                                            field: "customer_type",
                                            title: "客户类别",
                                            width: 100,
                                            data: CustomDict.customertype
                                        },
                                        {field: "accounts", title: '结算方'},
                                        {field: "shipper", title: '承运方'},
                                        {field: "zip", title: '邮编'},
                                        {field: "contact", title: '联系人'},
                                        {field: "telephone", title: '电话'},
                                        {
                                            field: "is_enable",
                                            title: '是否启用',
                                            formatter: (v) => (_.trim(v) === '1' ? '启用' : '不启用')
                                        },
                                        {field: "remark", title: '备注'},
                                        {field: "create_by", title: '创建者'},
                                        {field: "create_at", title: '建立时间', formatter: 'fmtDate'},
                                        {field: "update_by", title: '修改者'},
                                        {field: "update_at", title: '更新时间', formatter: 'fmtDate'},
                                    ],
                                    autoDataSource: true,
                                    dataSource: {
                                        func: CustomService.selectAll
                                    }
                                }
                            },
                            {
                                title: '选项卡2',
                                key: 'thetab2',
                                forceRender: false,
                                content: {
                                    view: 'grid',
                                    title: '表格排序2',
                                    ref: 'grid2',
                                    idField: "customerid",
                                    toolbar: [
                                        {
                                            view: 'button',
                                            text: '刷新',
                                            icon: 'fa fa-refresh',
                                            type: 'primary',
                                            onClick: () => {
                                                this.refs.grid2.refresh()
                                            }
                                        },
                                    ],
                                    columns: [
                                        {field: "customerid"},
                                        {field: "customer_code", title: "客户编号", width: 80,},
                                        {field: "customer_name", title: "客户名称", width: 120},
                                        {field: "logogram", title: "助记码", width: 80},
                                        {
                                            field: "industry_class",
                                            title: "客户类型",
                                            width: 100,
                                            data: CustomDict.industryclass
                                        },
                                        {
                                            field: "customer_type",
                                            title: "客户类别",
                                            width: 100,
                                            data: CustomDict.customertype
                                        },
                                        {field: "accounts", title: '结算方'},
                                        {field: "shipper", title: '承运方'},
                                        {field: "zip", title: '邮编'},
                                        {field: "contact", title: '联系人'},
                                        {field: "telephone", title: '电话'},
                                        {
                                            field: "is_enable",
                                            title: '是否启用',
                                            formatter: (v) => (_.trim(v) === '1' ? '启用' : '不启用')
                                        },
                                        {field: "remark", title: '备注'},
                                        {field: "create_by", title: '创建者'},
                                        {field: "create_at", title: '建立时间', formatter: 'fmtDate'},
                                        {field: "update_by", title: '修改者'},
                                        {field: "update_at", title: '更新时间', formatter: 'fmtDate'},
                                    ],
                                    autoDataSource: true,
                                    dataSource: {
                                        func: CustomService.selectAll
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
}